<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="预约单号">
              <el-input v-model="form.orderSn" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="form.userName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input v-model="form.userPhone" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约医院">
              <el-select
                filterable
                v-loading="hospitalLoading"
                v-model="form.hospitalId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in officeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="咨询关闭来源">
              <el-select v-model="form.consult" clearable placeholder="请选择">
                <el-option label="仅咨询，无意向" :value="1"></el-option>
                <el-option label="有意向、客户在考虑" :value="2"></el-option>
                <el-option label="已交全款未做项目 " :value="4"></el-option>
                <el-option label="完成医美项目" :value="5"></el-option>
                <el-option label="客户未到院" :value="6"></el-option>
                <el-option label="客户已交定金" :value="16"></el-option>
                <el-option label="更改预约时间" :value="11"></el-option>
                <el-option label="签订合同并完成项目" :value="12"></el-option>

                <el-option label="退款（全额支付和抢购）" :value="13"></el-option>
                <el-option label="其他（用户某种原因关闭）" :value="14"></el-option>
                <el-option label="客户不消费，申请退款" :value="17"></el-option>
                <el-option label="系统自动关闭" :value="15"></el-option>
                <el-option label="体验活动，且不关联流水单" :value="18"></el-option>
                <el-option label="复查" :value="19"></el-option>
                <el-option label="其他" :value="20"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目名称">
              <el-input v-model="form.projectName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目分类">
              <el-cascader
                v-model="cates"
                placeholder="请选择"
                :options="cateOption"
                change-on-select
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约状态">
              <el-select v-model="form.orderStatus" placeholder="请选择">
                <el-option
                  v-for="item in orderStaOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约来源">
              <el-select v-model="form.source" placeholder="请选择">
                <el-option
                  v-for="item in typeOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预约时间" width="236">
              <el-date-picker
                v-model="orderDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="提交时间" width="236">
              <el-date-picker
                v-model="createDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-left:60px" type="primary" @click="searchFn">查询</el-button>
            <el-button
              style="margin-left:60px"
              v-if="hasPermission('AdminProjectOrderProjectProvider.exportProjectOrderList')"
              type="primary"
              @click="exprofun"
            >导出</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="orderSn" label="预约单号" />
        <el-table-column prop="userInfo" label="微信号">
          <template slot-scope="scope">{{ scope.row.userInfo?scope.row.userInfo:'暂无数据'}}</template>
        </el-table-column>
        <el-table-column label="用户信息">
          <template slot-scope="scope">
            {{ scope.row.userName }}
            <br />
            {{ scope.row.userPhone|phonereg }}
          </template>
        </el-table-column>
        <el-table-column prop="userInfo" label="推荐人信息">
          <template slot-scope="scope">
            {{ scope.row.serverName }}
            <br />
            {{ scope.row.serverPhone |phonereg}}
          </template>
        </el-table-column>

        <el-table-column label="预约状态">
          <template slot-scope="scope">
            <div>{{ scope.row.orderStatus | orderStatusType }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="orderDate" label="预约日期" />
        <el-table-column prop="hospitalName" label="预约医院" />
        <el-table-column prop="projectName" width="250" label="预约项目" />
        <el-table-column prop="name" label="项目分类" />
        <el-table-column label="预约来源">
          <template slot-scope="scope">
            <div>{{ scope.row.source | orderType }}</div>
          </template>
        </el-table-column>
        <el-table-column label="预约单类型">
          <template slot-scope="scope">
            <div>{{ scope.row.projectType}}</div>
          </template>
        </el-table-column>
        <el-table-column label="支付状态">
          <template slot-scope="scope">
            <div>{{ scope.row.payStatus | orderPayStatus }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="appointmentPrice" label="预约价" />
        <el-table-column prop="createDate" label="提交日期" />

        <el-table-column prop label="咨询结果类型">
          <template slot-scope="scope">
            <span v-if="scope.row.consult==1">仅咨询，无意向</span>
            <span v-if="scope.row.consult==2">有意向、客户在考虑</span>
            <span v-if="scope.row.consult==4">已交全款未做项目</span>
            <span v-if="scope.row.consult==5">完成医美项目</span>

            <span v-if="scope.row.consult==6">客户未到院</span>
            <span v-if="scope.row.consult==16">客户已交定金</span>
            <span v-if="scope.row.consult==11">更改预约时间</span>
            <span v-if="scope.row.consult==12">签订合同并完成项目</span>
            <span v-if="scope.row.consult==13">退款（全额支付和抢购）</span>
            <span v-if="scope.row.consult==14">其他（用户某种原因关闭）</span>
            <span v-if="scope.row.consult==17">客户不消费，申请退款</span>

            <span v-if="scope.row.consult==15">系统自动关闭</span>
            <span v-if="scope.row.consult==18">体验活动，且不关联流水单</span>
            <span v-if="scope.row.consult==19">复查</span>
            <span v-if="scope.row.consult==20">其他</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <div
              v-if="hasPermission('AdminProjectOrderProjectProvider.closeProjectOrderProjectByOrderSn')"
            >
              <el-button
                v-if="scope.row.orderStatus!=2"
                type="text"
                size="small"
                @click="closeMake(scope.row.orderSn,scope.row.projectType)"
              >关闭预约</el-button>
            </div>
            <el-button
              v-if="hasPermission('AdminProjectOrderProjectProvider.updateProjectOrderProjectUpdateByOrderSn')"
              type="text"
              size="small"
              @click="toRoutes('subManageEdit',scope.row.orderSn)"
            >编辑</el-button>
            <el-button
              v-if="hasPermission('AdminProjectOrderProjectProvider.findProjectOrderProjectByOrderSn')"
              type="text"
              size="small"
              @click="toRoutes('subManageInfo',scope.row.orderSn)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 关闭预约 -->
      <el-dialog
        title="关闭预约"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        width="468px"
      >
        <!-- 输入框 -->
        <el-form :inline="true" label-width="80px" label-position="right">
          <el-col :span="24">
            <el-form-item label="咨询结果">
              <el-select v-model="consultForm.consult" placeholder="请选择">
                <el-option
                  v-for="item in consultOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="consultForm.remark"
                class="textarea236"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose()">取 消</el-button>
          <el-button type="primary" @click="addSubmit()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="listForm.pageNum"
            :page-sizes="page_sizes"
            :page-size="listForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { exportfile, exportfun } from "@/api/commjs/exprot";
import {
  findProjectOrderList,
  closeProjectOrderProjectByOrderSn
} from "@/api/subscribeManage";
import { hospitalDropDown } from "@/api/doctorManage";
import { findAllBeautyCategoryList } from "@/api/medicalClassifyList";
export default {
  name: "SubManageIndex",
  filters: {
    cardType(e) {
      return window.helper.cardType(String(e));
    },
    // orderProjectType(e) {
    // switch (String(e)) {
    //   case "0":
    //     return "普通预约";
    //   case "1":
    //     return "全额购买";
    //   default:
    //     return "暂无";
    // }
    // },
    orderPayStatus(e) {
      return window.helper.orderPayStatus(String(e));
    },
    orderStatusType(e) {
      return window.helper.orderStatusType(String(e));
    },
    orderType(e) {
      switch (String(e)) {
        case "0":
          return "服务商小程序";
        case "1":
          return "ios";
        case "2":
          return "安卓";
        case "3":
          return "小程序";
        case "4":
          return "服务商小程序的客服";
        default:
          return "暂无";
      }
    }
  },
  data() {
    return {
      hospitalLoading: true,
      officeOption: [],
      orderStaOption: [],
      consultOption: [],
      consultForm: {
        orderSn: "",
        consult: null,
        remark: ""
      },
      val: "1",
      dialogVisible: false,
      tableLoading: true,
      dates: [],
      orderDate: null,
      createDate: null,
      cates: [],
      form: {
        ispc: 1,
        consult: null,
        orderSn: "",
        userName: "",
        userPhone: "",
        hospitalId: "-1",
        projectName: "",
        orderStatus: "-1",
        source: -1,
        beginCreateDate: null,
        endCreateDate: null,
        beginOrderDate: null,
        endOrderDate: null,
        cate: "",
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      page_sizes: [10, 30, 50, 100],
      page_totals: 0,
      listForm: {
        pageNum: 1,
        pageSize: 10
      },
      cateOption: [
        {
          value: 0,
          label: "医美"
        },
        {
          value: 1,
          label: "口腔管理"
        },
        {
          value: 2,
          label: "健康管理"
        }
      ],
      typeOption: [
        {
          value: -1,
          label: "全部"
        },
        {
          value: 0,
          label: "服务商小程序"
        },
        {
          value: 1,
          label: "ios"
        },
        {
          value: 2,
          label: "安卓"
        },
        {
          value: 3,
          label: "小程序"
        },
        {
          value: 4,
          label: "服务商小程序的客服"
        }
      ]
    };
  },
  inject: ["reload"],
  mounted() {
    this.getList(this.listForm);
    // 获取对应的options
    this.getOption();
    // 获取对应分类
    if (this.cateFn("0") != []) {
      this.cateOption[0]["children"] = this.cateFn("0");
    }
    if (this.cateFn("1") != []) {
      this.cateOption[1]["children"] = this.cateFn("1");
    }
    if (this.cateFn("2") != []) {
      this.cateOption[2]["children"] = this.cateFn("2");
    }
  },
  methods: {
    //导出
    async exprofun() {
      let dates = { ...this.form };
      dates.createdBy = this.$store.state.user.name;
      let res = await exportfun(
        "com.mmk.report.api.AdminReportProvider/1.0.0/exportProjectOrderProject.html",
        dates,
        "",
        1
      );
      this.$message({
        message: res.data.msg,
        type: "warning"
      });
      // exportfile(
      //   "com.mmk.reservation.api.AdminProjectOrderProjectProvider/1.0.0/exportProjectOrderList.html",
      //   this.form
      // );
    },
    // 按钮权限
    hasPermission(e) {
      return window.helper.hasPermission(e);
    },
    // 获取分类
    cateFn(e) {
      const datas = {
        plate: e
      };
      const newArr = [];
      findAllBeautyCategoryList(datas).then(res => {
        // console.log(res)
        const resData = res.data.data.list;
        if (resData != []) {
          resData.forEach((item1, index) => {
            newArr.push({
              value: item1.id,
              label: item1.name
            });
            if (item1.children != null) {
              newArr[index]["children"] = [];
              item1.children.forEach((item2, i) => {
                newArr[index]["children"].push({
                  value: item2.id,
                  label: item2.name
                });
                if (item2.children != null) {
                  newArr[index]["children"][i]["children"] = [];
                  item2.children.forEach(item3 => {
                    newArr[index]["children"][i]["children"].push({
                      value: item3.id,
                      label: item3.name
                    });
                  });
                }
              });
            }
          });
        }
      });
      return newArr;
    },
    getOption() {
      // 医院列表
      hospitalDropDown().then(res => {
        const resData = res.data.data;
        const newData = [];
        resData.forEach(e => {
          newData.push({
            value: e.id + "",
            label: e.name
          });
        });
        newData.unshift({
          value: "-1",
          label: "全部"
        });
        this.officeOption = newData;
        this.hospitalLoading = false;
      });
      // 获取预约状态
      this.orderStaOption = window.helper.orderStatusType("listReturn");
      this.orderStaOption.unshift({
        value: "-1",
        label: "全部"
      });
    },
    // 成功状态弹窗
    succStatus(txt) {
      this.$message({
        message: txt + "成功",
        type: "success"
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.$message.error(txt + "失败");
    },
    // 列表数据获取
    getList(e) {
      this.tableLoading = true;
      const datas = e;
      findProjectOrderList(datas)
        .then(res => {
          // console.log(res)
          if (!res.data.code) {
            // console.log(res)
            this.tableData = res.data.data.list;
            this.page_totals = res.data.data.count;
            if (!this.form.hospitalId) {
              this.form.hospitalId = -1;
            }
            if (!this.form.orderStatus) {
              this.form.orderStatus = null;
            }
            if (!this.form.type) {
              this.form.type = null;
            }
          } else {
            this.$message.error(res.data.msg);
          }
          this.tableLoading = false;
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    // 查询
    searchFn() {
      this.form.pageNum = 1;
      if (this.cates.length > 0) {
        this.form.cate = String(this.cates[this.cates.length - 1]);
      }
      if (this.orderDate != null) {
        if (this.orderDate.length) {
          this.form.beginOrderDate = this.orderDate[0];
          this.form.endOrderDate = this.orderDate[1];
        }
      } else {
        this.form.beginOrderDate = null;
        this.form.endOrderDate = null;
      }
      if (this.createDate != null) {
        if (this.createDate.length) {
          this.form.beginCreateDate = this.createDate[0];
          this.form.endCreateDate = this.createDate[1];
        }
      } else {
        this.form.beginCreateDate = null;
        this.form.endCreateDate = null;
      }
      this.getList(this.form);
    },
    // 账号状态修改
    swithFn(userId, status) {
      const datas = { userId, status };
      updateStatus(datas)
        .then(res => {
          if (!res.data.code) {
            this.succStatus("修改");
            this.getList(this.listForm);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false;
      // this.$refs["addForm1"].resetFields();
    },
    addSubmit() {
      this.consultForm["consult"] = Number(this.consultForm["consult"]);
      const datas = this.consultForm;
      closeProjectOrderProjectByOrderSn(datas)
        .then(res => {
          if (!res.data.code) {
            this.succStatus("关闭");
            this.getList(this.form);
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error(error);
        });

      this.dialogVisible = false;
    },
    closeMake(e, projectType) {
      this.consultForm.orderSn = e;
      this.consultForm["consult"] = null;
      this.consultForm["remark"] = "";
      this.dialogVisible = true;
      let consultOption = window.helper.consult("listReturn");
      if (projectType == 0) {
        consultOption = consultOption.slice(0, 2);
      } else {
        consultOption = consultOption.slice(-2);
      }
      this.consultOption = consultOption;
    },
    // 路由跳转
    toRoutes(e, userId) {
      const route = { name: e, query: { userId: userId } };
      this.$router.push(route);
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.pageNum = val;
      this.getList(this.form);
    }
  }
};
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
</style>
